<template>
    <div>
      <Category :scene="scene"></Category>
      <el-card shadow="always" style="margin:10px 0" >
         <div v-show="scene==0">
          <el-button type="primary" size="default" :icon="Plus" @click="addSpu" :disabled="!categortStore.C3Id">添加SPU</el-button>
          <el-table  border stripe style="margin:10px 0" :data="spuList.records" >
            <el-table-column label="序号" type="index" align="center" width="80px" ></el-table-column>
            <el-table-column label="SPU名称" prop="spuName" ></el-table-column>
            <el-table-column label="SPU描述" prop="description" ></el-table-column>
            <el-table-column label="操作" >
              <template #="{row,$index}">
                <el-button type="primary" size="small" title="添加SKU" :icon="Plus" @click="addSku(row)"></el-button>
                <el-button type="warning" size="small" title="修改SPU" :icon="Edit" @click="updateSpu(row)"></el-button>
                <el-button type="info" size="small" title="查看SKU" :icon="InfoFilled"   @click="showDialog(row)"></el-button>
                <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="yellowgreen"
                :title="`你确定要删除${row.spuName}`"
                width="300px"
                @confirm="confirm(row)"
              >
              <template #reference>
                <el-button type="danger" size="small" title="删除SPU" :icon="Delete"></el-button>
              </template>
              </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChange"
            @current-change="getSpuList"
            :current-page.sync="currentPage"
            :page-sizes="[3, 5, 7]"
            :page-size="pageSize"
            layout=" prev, pager,next, jumper,->,sizes,total"
            :total="99" 
            background
            :pager-count="7">
          </el-pagination>
          
         </div>
        <AddOrUpdateSpu v-show="scene==1"  @changeScene="changeSceneHandler" ref="spuRef" ></AddOrUpdateSpu>
        <AddSku v-show="scene==2" ref="skuRef"   @changeScene="changeSceneHandler"></AddSku>
      </el-card>
      
    </div>
</template>

<script setup lang="ts">
  // 引入仓库
import useCategoryStore from "@/stores/category";
  // 引入数据请求接口
  import { reqSpuList ,  reqDeleteSpu ,reqFindSkuList} from "@/api/product/spu/spu";
  import {ref,watch,onUnmounted} from 'vue'
  //引入element-plus提供icon图标组件
import { Check,Delete,Edit,Message,Search,Star,Plus,UploadFilled,InfoFilled} from "@element-plus/icons-vue";
import AddOrUpdateSpu from "./addOrUpdateSpu.vue";
import AddSku from "./addSku.vue";
import { ElMessage } from "element-plus";
  // 定义改变场景的动态数据
let scene = ref<number>(0)
  // 定义响应式数据分页器当前页码
let currentPage = ref<number>(1)
// 定义分页器一页几条数据
let pageSize= ref<number>(3)
// 获取仓库
let categortStore = useCategoryStore();
// 定义响应式对象,存储服务器返回数据(spuList)
let spuList = ref({})
// 定义响应式变量,用来存储,通过ref获得的子组件实例(属性和方法)
let spuRef = ref()
// 定义响应式变量,用来存储,通过ref获得的子组件实例(属性和方法)
let skuRef = ref()

// 监听三级分类id变化
watch(()=>categortStore.C3Id,()=>{
     if(categortStore.C3Id=='') return
    // 发请求获取某一个三级分类下的全部SKU 
    getSpuList()
})

// 发请求获取某一个三级分类下的全部SKU的函数方法
const getSpuList = async(page:number=1)=>{
     currentPage.value = page
  let result = await reqSpuList(currentPage.value,pageSize.value,categortStore.C3Id)
      // Object.assign(spuList,result)
    spuList.value = result
}

// 每页展示数据条数发生变化函数回调
const sizeChange = (limit:number)=>{
    // 整理参数,存储数据
    pageSize.value =limit
    // 再次发请求获取最新数据
    getSpuList()
}

// 添加spu按钮的回调
const addSpu = ()=>{
  // 切换到场景1
    scene.value = 1
    // 调用子组件里的方法,让子组件发俩请求
    spuRef.value.initAddSpu(categortStore.C3Id)
}

// 修改按钮的回调
const updateSpu = (row)=>{
  // console.log(row);
  // Proxy {id: 3290, spuName: '44', description: '44', category3Id: 61, tmId: 13986, …}
  
  // 切换到场景1
  scene.value = 1
  // 调用子组件中的方法 , 点击修改按钮时跳转完场景发四个请求获取场景1的所有数据
  spuRef.value.initHasSpuData(row)
}

// 子组件自定义事件,点击子组件中的取消按钮,修改父组件中的数据以达到切换场景的功能
const changeSceneHandler = ({scenes , flag})=>{
  // params接收到子组件通过触发自定义事件传来的参数,名字随意取
    scene.value = scenes
    // 修改
    if(flag =='update'){
      // 修改之后留在当前页
      getSpuList(currentPage.value)
    }else{
      getSpuList()
    }
   
}

// 添加SKU按钮的回调
const addSku= (spu)=>{
    scene.value=2
    skuRef.value.initSku(categortStore.C1Id,categortStore.C2Id,spu)
}

//点击第三个按钮的回调
//spu
const showDialog = async (spu) => {
  //显示对话框
  dialogTableVisible.value = true;
  //发请求获取SKU列表
  let skus = await reqFindSkuList(spu.id);
  skuList.value = skus;
};

//pop组件的确定按钮的回调
const confirm = async (spu) => {
  try {
    //删除某一个SPU
    await reqDeleteSpu(spu.id);
    //提示
    ElMessage({
      type:'success',
      message:`恭喜你删除${spu.spuName}成功`
    });
    //更新数据
    getSpuList();
  } catch (error) {
     ElMessage({
      type:'error',
      message:`恭喜你删除${spu.spuName}失败`
    });
  }
};


//当前SPU路由组件(父组件)销毁的时候，情况仓库数据
onUnmounted(() => {
  //组件销毁的时候。情况仓库里面的数据
  categortStore.C1Id = "";
  categortStore.C2Id = "";
  categortStore.C3Id = "";
  categortStore.C1List = [];
  categortStore.C2List = [];
  categortStore.C3List = [];
});
</script>

<style scoped>

</style>